<template>
  <div class="main">
    <div class="float-right w-[100%]">
      <el-form
        ref="formRef"
        :inline="true"
        :model="formData"
        class="bg-bg_color w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="应用授权项：" prop="username">
          <el-input
            v-model="formData.postname"
            placeholder="请输入应用授权项"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch"
            ><el-icon class="el-icon--left"><Search /></el-icon>搜索</el-button
          >
          <el-button @click="resetForm(formRef)"
            ><el-icon class="el-icon--left"><Refresh /></el-icon>重置</el-button
          >
        </el-form-item>
      </el-form>

      <PureTableBar title="" @refresh="onSearch" :needtool="false">
        <template v-slot="{ size, checkList }">
          <div class="table-header-btns">
            <el-button type="primary" plain @click="batchAuth">
              <el-icon class="el-icon--left"><CirclePlus /></el-icon>
              批量授权
            </el-button>
            <el-button type="danger" plain @click="clearCheckedPermissions">
              <!-- <el-icon class="el-icon--left"><EditPen /></el-icon> -->
              清空
            </el-button>
          </div>
          <pure-table
            border
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :data="tableData"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="edit(row)"
              >
                <el-icon class="el-icon--left"><EditPen /></el-icon>
                修改
              </el-button>
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="clearPermission(row)"
              >
                清空
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
    <jobsTreeTransfer
      ref="jobsTreeCom"
      :isMulti="true"
      :isEmployee="true"
      :isMix="true"
    />
  </div>
</template>

<script>
import dayjs from "dayjs";
import { PureTableBar } from "@/components/RePureTableBar";
import jobsTreeTransfer from "@/components/jobsTreeTransfer/index";
export default {
  name: "permissionSetting",
  components: { PureTableBar, jobsTreeTransfer },
  data() {
    return {
      formData: {},
      columns: [
        {
          type: "selection",
          align: "left"
        },
        {
          label: "应用授权项",
          prop: "postname"
        },
        {
          label: "类型",
          prop: "username"
        },
        {
          label: "授权明细",
          prop: "nickname",
          width: 600
        },
        {
          label: "操作",
          fixed: "right",
          width: 230,
          slot: "operation"
        }
      ],
      loading: false,
      tableData: [
        {
          postname: "人资中心",
          username: "表单分类"
        }
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        background: true
      },
      size: "small",
      selectionRows: []
    };
  },

  methods: {
    handleSelectionChange(selections) {
      this.selectionRows = selections;
    },
    clearPermission(row) {
      this.$messageBox
        .confirm("该操作会将所有授权明细清空，请确认！", "系统提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {})
        .catch();
    },
    clearCheckedPermissions() {
      if (this.selectionRows && this.selectionRows.length > 0) {
        this.$messageBox
          .confirm("该操作会将所有授权明细清空，请确认！", "系统提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {})
          .catch();
      } else {
        this.$message.warning("请选择数据");
      }
    },
    // 批量授权
    batchAuth() {},

    edit(row) {
      this.$refs.jobsTreeCom.onChangeVisible();
    }
  },

  mounted() {}
};
</script>

<style lang="scss" scoped>
.table-header-btns {
  margin-bottom: 8px;
}
</style>
